<!DOCTYPE html>

<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>登录</title>

<link rel="shortcut icon" href="../images/ali.gif" type="image/gif" />
<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../css/login.css" />
</head>

<body class="beg-login-bg">
	<div class="beg-login-box">
		<header>
			<h1>后台登录</h1>
		</header>
		<div class="beg-login-main">
			<form class="layui-form">
				<div class="layui-form-item">
					<label class="beg-login-icon"> <i class="layui-icon">&#xe612;</i>
					</label> <input type="text" name="username" lay-verify="username"
						autocomplete="off" placeholder="请输入登录名" class="layui-input">
				</div>
				<div class="layui-form-item">
					<label class="beg-login-icon"> <i class="layui-icon">&#xe642;</i>
					</label> <input type="password" name="password" lay-verify="password"
						autocomplete="off" placeholder="请输入密码" class="layui-input">
				</div>
				<div class="layui-form-item">
					<div class="beg-pull-left">
						<img src="../getAuthImg" id="AuthImg">
					</div>
					<div class="beg-pull-right">
						<input type="text" name="code" lay-verify="code"
							autocomplete="off" placeholder="请输入验证码" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="beg-pull-left beg-login-remember">
						<label>记住帐号？</label> <input type="checkbox" name="rememberme"
							value="true" lay-skin="switch" checked title="记住帐号">
					</div>
					<div class="beg-pull-right">
						<button class="layui-btn layui-btn-primary" lay-submit
							lay-filter="login">
							<i class="layui-icon">&#xe650;</i> 登录
						</button>
					</div>
					<div class="beg-clear"></div>
				</div>
			</form>
		</div>

	</div>
	<script type="text/javascript" src="../plugins/layui/layui.js"></script>
	<script>
		layui.config({
			base : '../plugins/layui/modules/'
		});
		layui.use([ 'layer', 'form' ], function() {
			var layer = layui.layer,
				$ = layui.jquery,
				form = layui.form(),
				timestamp = new Date().getTime();
	
			//密码错误次数
			var i = 5;
	
			$('#AuthImg').on('click', function() {
				flushImg();
			});
			form.on('submit(login)', function(data) {
				var info = data.field;
				var json = {
					"username" : info.username,
					"password" : info.password,
					"code" : info.code,
					"rememberme" : false
				};
				if (info.rememberme != null) {
					json.rememberme = info.rememberme;
				}
				$.ajax({
					url : '../login',
					type : "POST",
					data : JSON.stringify(json),
					async : false,
					dataType : 'json',
					contentType : 'application/json;charset=utf-8',
					success : function(info) {
						if (info.message.indexOf("login success") != -1) {
							setCookie('userName', json.username);
							window.location.href = "../";
						} else if (info.message.indexOf("error username") != -1) {
							layer.msg('用户名错误!');
							flushImg();
						} else if (info.message.indexOf("error password") != -1) {
							layer.msg('密码错误!还可尝试' + --i + '次!');
							flushImg();
						} else if (info.message.indexOf("error code") != -1) {
							layer.msg('验证码错误!');
							flushImg();
						} else if (info.message.indexOf("locked user") != -1) {
							layer.msg('您的账号已被锁定!');
						} else if (info.message.indexOf("locked 10min") != -1) {
							layer.msg('密码错误,您的账号被锁定10分钟!');
							flushImg();
						}
					}
				});
				return false;
			});
	
			function flushImg() {
				$("#AuthImg").attr("src", $("#AuthImg").attr('src') + '?' + timestamp);
			}
	
			function setCookie(name, value) {
				var Days = 7;
				var exp = new Date();
				exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
				document.cookie = name + "=" + value + ";expires=" + exp.toGMTString() + ";path=/;";
			}
	
		});
	</script>
</body>

</html>